<script setup>
import { RouterLink } from 'vue-router'
import { ref } from "vue";
import { logo } from '@/assets/brand/logo'
import { sygnet } from '@/assets/brand/sygnet'
import { AppSidebarNav } from '@/components/AppSidebarNav.js'
import { useSidebarStore } from '@/stores/sidebar.js'
import MenuIconButton from '../components/MenuIconButton.vue'
import bus from '../tools/eventBus'
const sidebar = useSidebarStore()
const isTrue = ref(false)

bus.on('unfoldable', (is) => {
    isTrue.value = is
})

</script>

<template>
  <CSidebar
    
    colorScheme="dark"
    position="fixed"
    :unfoldable="sidebar.unfoldable"
    :visible="isTrue"
    @visible-change="(value) => sidebar.toggleVisible(value)"
    style="position: relative;"
  >
    <CSidebarHeader class="border-bottom">
      一张网调度
      <CCloseButton class="d-lg-none" dark @click="sidebar.toggleVisible()" />
      <!-- <el-tooltip
        class="box-item"
        effect="dark"
        content="折叠"
        placement="right"
      > -->
      <CIcon class="CIcon_css" icon="cil-menu" size="lg" @click="sidebar.toggleVisible()" />
      <!-- </el-tooltip> -->
      <CHeaderToggler class="cilMenu"  style="margin-inline-start: -14px">
        <!-- <CIcon icon="cil-menu" size="lg" @click="sidebar.toggleVisible()" /> -->
        <MenuIconButton  v-if="isTrue === false"></MenuIconButton>
      </CHeaderToggler>
    </CSidebarHeader>
    <AppSidebarNav />
    <CSidebarFooter class="border-top d-none d-lg-flex">
      <CSidebarToggler @click="sidebar.toggleUnfoldable()" />
    </CSidebarFooter>
  </CSidebar>
</template>
<style lang="scss" scoped>
.cilMenu{
  position: relative;
  left: 42px;
  // width: 60px;
  background: #fff;
}
.border-top{
  border: solid 1px #fff !important;
  background: #fff;
}
.border-bottom{
  border-bottom:solid 1px #ccc !important;
}
::v-deep.nav-icon{
  color: #000 !important;
}
.nav-link .nav-icon {
  color: black !important; /* 设置图标颜色为黑色 */
}
.CIcon_css{
  margin-left: 100px;
}
</style>